<script setup lang="ts">
defineOptions({
  name: ""
});
import { useComponent, useSnapshot, useLayer } from "@visual/stores";
import { storeToRefs } from "pinia";
import { computed, ref } from "vue";
import { Component } from "../types";
import { Hide, View } from "@px-ui/icons-vue";
const { upComponent: upComp, downComponent: downComp } = useLayer();
const componentStore = useComponent();
const { componentData, curComponent, curComponentIndex, rightList } = storeToRefs(componentStore);
const { setCurComponent, isShowRightList, deleteComponent: delComp, toggleComponentShow } = componentStore;
const { recordSnapshot } = useSnapshot();
const activeName = ref("all"); //all group
const handleClick = (tab, event) => {};
const componentGroup = computed(() => {
  let map: Record<string, Component[]> = {};
  componentData.value.forEach(item => {
    if (item.component) {
      if (!map[item.component]) {
        map[item.component] = [];
      }
      map[item.component].push(item);
    }
  });
  return map;
});
function hasComponentsIsShow(components) {
  return components.some(item => item.isShow !== false);
}
function toggleComponents(components) {
  const isShow = hasComponentsIsShow(components);
  components.forEach(item => {
    item.isShow = !isShow;
  });
}
function groupItemClick(item) {
  if (!rightList.value) {
    isShowRightList();
  }
  setCurComponent({
    component: item,
    index: componentData.value.findIndex(i => i === item)
  });
}
function getComponent(index) {
  return componentData.value[componentData.value.length - 1 - index];
}
function transformIndex(index) {
  return componentData.value.length - 1 - index;
}
function onClick(index) {
  if (!rightList.value) {
    isShowRightList();
  }

  setCurComponent({
    component: componentData.value[index],
    index: index
  });
}
function deleteGroupComponent(item) {
  let i = componentData.value.findIndex(i => i.id === item.value.id);

  delComp(i);
  recordSnapshot();
}
function deleteComponent(index) {
  let i = index;
  if (!i) {
  }
  delComp(i);
  recordSnapshot();
}
function upComponent() {
  upComp();
  recordSnapshot();
}
function downComponent() {
  downComp();
  recordSnapshot();
}
function toggleComponent(index) {
  toggleComponentShow(transformIndex(index));
}
</script>

<template>
  <div class="real-time-component-list">
    <px-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <px-tab-pane label="全部" name="all">
        <div
          v-for="(item, index) in componentData"
          :key="index"
          class="list"
          :class="{ actived: transformIndex(index) === curComponentIndex }"
          @click="onClick(transformIndex(index))"
        >
          <span v-if="getComponent(index).icon" class="iconfont" :class="'icon-' + getComponent(index).icon" />
          <span>{{ getComponent(index).label }}</span>
          <div class="icon-container justify-center items-center">
            <span class="iconfont icon-shangyi" @click="upComponent()" />
            <span class="iconfont icon-xiayi" @click="downComponent()" />
            <div class="w-[20px] h-[20px]" @click="toggleComponent(index)">
              <px-icon v-if="getComponent(index).isShow !== false" class="w-[20px] h-[20px]">
                <View />
              </px-icon>
              <px-icon v-else class="w-[20px] h-[20px]">
                <Hide />
              </px-icon>
            </div>
            <span class="iconfont icon-shanchu" @click="deleteComponent(transformIndex(index))" />
          </div>
        </div>
      </px-tab-pane>

      <px-tab-pane label="组合" name="compose">
        <px-collapse accordion>
          <px-collapse-item v-for="(value, key) in componentGroup" :key="key" :name="key">
            <template #title>
              <div class="flex items-center justify-between w-[80%]">
                {{ key }}
                <div class="w-[20px] h-[20px]" @click.stop="toggleComponents(value)">
                  <View v-if="hasComponentsIsShow(value) !== false" class="w-[20px] h-[20px]" />
                  <Hide v-else class="w-[20px] h-[20px]" />
                </div>
              </div>
            </template>
            <div v-for="item in value" :key="item.id" class="list" :class="{ actived: item === curComponent }" @click="groupItemClick(item)">
              <span v-if="item.icon" class="iconfont" :class="'icon-' + item.icon" />
              <span>{{ item.label }}</span>
              <div class="icon-container justify-center items-center">
                <span class="iconfont icon-shangyi" @click="upComponent()" />
                <span class="iconfont icon-xiayi" @click="downComponent()" />
                <div class="w-[20px] h-[20px]" @click="item.isShow = !item.isShow">
                  <px-icon v-if="item.isShow !== false" class="w-[20px] h-[20px]">
                    <View />
                  </px-icon>
                  <px-icon v-else class="w-[20px] h-[20px]">
                    <Hide />
                  </px-icon>
                </div>
                <span class="iconfont icon-shanchu" @click="deleteGroupComponent(item)" />
              </div>
            </div>
          </px-collapse-item>
        </px-collapse>
      </px-tab-pane>
      <px-tab-pane label="分组" name="group">
        <px-collapse accordion>
          <px-collapse-item v-for="(value, key) in componentGroup" :key="key" :name="key">
            <template #title>
              <div class="flex items-center justify-between w-[80%]">
                {{ key }}
                <div class="w-[20px] h-[20px]" @click.stop="toggleComponents(value)">
                  <View v-if="hasComponentsIsShow(value) !== false" class="w-[20px] h-[20px]" />
                  <Hide v-else class="w-[20px] h-[20px]" />
                </div>
              </div>
            </template>
            <div v-for="item in value" :key="item.id" class="list" :class="{ actived: item === curComponent }" @click="groupItemClick(item)">
              <span v-if="item.icon" class="iconfont" :class="'icon-' + item.icon" />
              <span>{{ item.label }}</span>
              <div class="icon-container justify-center items-center">
                <span class="iconfont icon-shangyi" @click="upComponent()" />
                <span class="iconfont icon-xiayi" @click="downComponent()" />
                <div class="w-[20px] h-[20px]" @click="item.isShow = !item.isShow">
                  <px-icon v-if="item.isShow !== false" class="w-[20px] h-[20px]">
                    <View />
                  </px-icon>
                  <px-icon v-else class="w-[20px] h-[20px]">
                    <Hide />
                  </px-icon>
                </div>
                <span class="iconfont icon-shanchu" @click="deleteGroupComponent(item)" />
              </div>
            </div>
          </px-collapse-item>
        </px-collapse>
      </px-tab-pane>
    </px-tabs>
  </div>
</template>

<style lang="scss" scoped>
.real-time-component-list {
  height: 35%;

  .list {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    color: #333;
    text-align: center;
    cursor: grab;
    user-select: none;
    opacity: 1;

    &:active {
      cursor: grabbing;
    }

    &:hover {
      background-color: rgb(200 200 200 / 200%);

      .icon-container {
        display: flex;
      }
    }

    .iconfont {
      margin-right: 4px;
      font-size: 16px;
    }

    .icon-wenben,
    .icon-tupian {
      font-size: 14px;
    }

    .icon-container {
      position: absolute;
      right: 10px;
      display: none;

      .iconfont {
        cursor: pointer;
      }
    }
  }

  .actived {
    color: #409eff;
    background: #ecf5ff;
  }
}
</style>
